<template>
  <div class="public_main" >
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('dashBoard.no1')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('dashBoard.no1')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="pos_abs">
      <i class="el-icon-refresh f20 blue" @click="refresh"></i>
      <span class="ml10 blue">{{$t('adminHome.no48')+': '+date}}</span>
    </div>
    <!-- 今日数据 v-if="$store.state.common.permiss.dashboard.includes('channelconfig')" -->
    <div class="shadowbox mb30" v-if="$store.state.common.permiss.dashboard.includes('dashboardB')">
      <div class="title pl30">
        <i class="el-icon-date f18 mr10"></i>
        <span class="f18 ">{{$t('adminHome.todayData')}}</span>
      </div>
      <ul class="total">
        <li class="total-li mt30 mb30" v-for="item in todayData" :key="item.id">
          <p class="tc cl_999 f14 mb20">{{$t(item.title)}}</p>
          <p class="tc cl_365 f30 wb">{{$store.getters.moneySplit(item.num)}}</p>
        </li>
      </ul>
    </div>
    <!-- 上周平均每日数据 -->
    <div class="shadowbox mb40" v-if="$store.state.common.permiss.dashboard.includes('dashboardD')">
      <div class="title pl30">
        <i class="el-icon-date f18 mr10"></i>
        <span class="f18 ">{{$t('adminHome.no21')}}</span>
      </div>
      <ul class="total">
        <li class="total-li mt30 mb30" v-for="item in dailyData" :key="item.id">
          <p class="tc cl_999 f14 mb20">{{$t(item.title)}}</p>
          <p class="tc cl_262 f30 wb">{{$store.getters.moneySplit(item.num)}}</p>
        </li>
      </ul>
    </div>

    <div class="shadowbox1 flex flex-wrap flex-justify-between">
      <!-- 商户情况 -->
      <div class="one shadowType1" v-if="$store.state.common.permiss.dashboard.includes('dashboardA')">
        <div class="flex flex-align-center mb20"><span class="embellish mr10"></span><span class="f18 cl_262">{{$t('adminHome.no22')}}</span></div>
        <div class="one-detail mb35">
          <ul class="one-ul flex flex-justify-around">
            <li class="w310 bg1">
              <p class="f14 mb20 cl_fff">{{$t('adminHome.no23')}}</p>
              <p class="f30 cl_fff">{{merchantData.sumPartner}}</p>
            </li>
            <li class="w310 bg2">
              <p class="f14 mb20 cl_fff">{{$t('adminHome.no24')}}</p>
              <p class="f30 cl_fff">{{merchantData.onlinePartner}}</p>
            </li>
            <li class="w310 bg3">
              <p class="f14 mb20 cl_fff">{{$t('adminHome.no25')}}</p>
              <p class="f30 cl_fff">{{merchantData.schedulePartner}}</p>
            </li>
          </ul>
        </div>
        <div class="flex flex-align-center mb20"><span class="embellish mr10"></span><span class="f18 cl_262">{{$t('adminHome.no26')}}</span></div>
        <div class="one-detail mb10">
          <ul class="one-ul flex">
            <li class="w25_ flex">
              <div class="miniimg img1"></div>
              <div class="pl20">
                <p class="f14 mb20 cl_999">{{$t('adminHome.no27')}}</p>
                <p class="f30 cl_262">{{auditSituationData.machineAuditRejectCount}}</p>
              </div>
            </li>
            <li class="w25_ flex">
              <div class="miniimg img2"></div>
              <div class="pl20">
                <p class="f14 mb20 cl_999">{{$t('adminHome.no28')}}</p>
                <p class="f30 cl_262">{{auditSituationData.machineAuditFailedCount}}</p>
              </div>
            </li>
            <li class="w25_ flex">
              <div class="miniimg img3"></div>
              <div class="pl20">
                <p class="f14 mb20 cl_999">{{$t('adminHome.no29')}}</p>
                <p class="f30 cl_262">{{auditSituationData.artificialPreliminaryAuditRejectCount}}</p>
              </div>
            </li>
            <li class="w25_ flex">
              <div class="miniimg img4"></div>
              <div class="pl20">
                <p class="f14 mb20 cl_999">{{$t('adminHome.no30')}}</p>
                <p class="f30 cl_262">{{auditSituationData.artificialRecheckRejectCount}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 消费情况 -->
      <div class="two shadowType1 mb_30" v-if="$store.state.common.permiss.dashboard.includes('dashboardF')">
        <div class="h70 flex flex-align-center pl30"><span class="embellish mr10"></span><span class="f18 cl_262">{{$t('adminHome.no31')}}</span></div>
        <div class="pt30 pb30 flex flex-align-center">
          <div class="circle circle_1 ml50 mr10"></div>
          <div class="w30_">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no32')}}</p>
            <p class="cl_262 f26">{{consumptionSituationData.todayLoanCount}}</p>
          </div>
          <div class="flex1">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no33')}}</p>
            <p class="cl_262 f26">{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(consumptionSituationData.todayTechnicalServiceFee)}}
                {{$store.state.common.vi_currency}}</p>
          </div>
        </div>
        <div class="h70 flex flex-align-center pl30"><span class="embellish mr10"></span><span class="f18 cl_262">{{$t('adminHome.no34')}}</span></div>
        <div class="pt30 pb30 flex flex-align-center">
          <div class="circle circle_2 ml50 mr10"></div>
          <div class="w30_">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no32')}}</p>
            <p class="cl_262 f26">{{consumptionSituationData.historicalLoanCount}}</p>
          </div>
          <div class="flex1">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no33')}}</p>
            <p class="cl_262 f26">{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(consumptionSituationData.historicalTechnicalServiceFee)}}
                {{$store.state.common.vi_currency}}</p>
          </div>
        </div>
      </div>
      <!-- 放款情况 -->
      <div class="two shadowType1 mb_30 mt_30" v-if="$store.state.common.permiss.dashboard.includes('dashboardE')">
        <div class="h70 flex flex-align-center pl30"><span class="embellish mr10"></span><span class="f18 cl_262">{{$t('adminHome.no35')}}</span></div>
        <div class="pt20 pb10 flex flex-align-center">
          <div class="circle circle_1 ml50 mr10"></div>
          <div class="w30_">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no36')}}</p>
            <p class="cl_262 f26">{{historicalLoanData.loanCount}}</p>
          </div>
          <div class="flex1">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no37')}}</p>
            <p class="cl_262 f26">{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(historicalLoanData.loanAmount)}}
                {{$store.state.common.vi_currency}}</p>
          </div>
        </div>
        <div class="pt20 pb10 flex flex-align-center">
          <div class="circle circle_2 ml50 mr10"></div>
          <div class="w30_">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no38')}}</p>
            <p class="cl_262 f26">{{historicalLoanData.repaymentCount}}</p>
          </div>
          <div class="flex1">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no39')}}</p>
            <p class="cl_262 f26">{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(historicalLoanData.repaymentAmount)}}
                {{$store.state.common.vi_currency}}</p>
          </div>
        </div>
        <div class="pt20 pb10 flex flex-align-center">
          <div class="circle circle_3 ml50 mr10"></div>
          <div class="w30_">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no40')}}</p>
            <p class="cl_262 f26">{{historicalLoanData.inLoanCount}}</p>
          </div>
          <div class="flex1">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no41')}}</p>
            <p class="cl_262 f26">{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(historicalLoanData.inLoanAmount)}}
                {{$store.state.common.vi_currency}}</p>
          </div>
        </div>
        <div class="pt20 pb10 flex flex-align-center">
          <div class="circle circle_4 ml50 mr10"></div>
          <div class="w30_">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no42')}}</p>
            <p class="cl_262 f26">{{historicalLoanData.overdueCount}}</p>
          </div>
          <div class="flex1">
            <p class="cl_999 mb10 f14">{{$t('adminHome.no43')}}</p>
            <p class="cl_262 f26">{{$store.state.common.id_currency}}
                {{$store.getters.moneySplit(historicalLoanData.overdueAmount)}}
                {{$store.state.common.vi_currency}}</p>
          </div>
        </div>
      </div>
      <!-- 今日放款量前五 -->
      <div class="two shadowType1 mt_30" v-if="$store.state.common.permiss.dashboard.includes('dashboardG')">
        <div class="h70 flex flex-align-center pl30"><span class="embellish mr10"></span><span class="f18 cl_262">{{$t('adminHome.no44')}}</span></div>
        <table class="dashTable">
          <tr>
            <!-- <th width="20%">序号</th> -->
            <th width="40%">{{$t('adminHome.no46')}}</th>
            <th width="60%">{{$t('adminHome.no47')}}</th>
          </tr>
          <tr v-for="item in todayFive" :key="item.id">
            <!-- <td ><span >{{item.id}}</span></td> -->
            <td class="f18">{{item.partnerName}}</td>
            <td class="f20">{{item.loanCount}}</td>
          </tr>
        </table>
      </div>
      <!-- 上周放款量前五 -->
      <div class="two shadowType1 mt_30" v-if="$store.state.common.permiss.dashboard.includes('dashboardH')">
        <div class="h70 flex flex-align-center pl30"><span class="embellish mr10"></span><span class="f18 cl_262">{{$t('adminHome.no45')}}</span></div>
        <table class="dashTable">
          <tr>
            <th width="40%">{{$t('adminHome.no46')}}</th>
            <th width="60%">{{$t('adminHome.no47')}}</th>
          </tr>
          <tr v-for="item in sevenFive" :key="item.id">
            <td class="f18">{{item.partnerName}}</td>
            <td class="f20">{{item.loanCount}}</td>
          </tr>
        </table>
      </div>
    </div>
    


    <!-- -------------- 底部空白------------------------ -->
    <div class="foot"></div>
  </div>
</template>

<script>

export default {
  name: 'adminHome',
  data () {
    return {
      todayData: [
        { id:1,title:'注册',num:''},
        {id:2,title:'注册',num:''},
        {id:3,title:'注册',num:''},
        {id:4,title:'注册',num:''},
        {id:5,title:'注册',num:''},
        {id:6,title:'注册',num:''},
        {id:7,title:'注册',num:''},
        {id:8,title:'注册',num:''},
        {id:9,title:'注册',num:''}
      ],
      dailyData: [
        { id:1,title:'注册',num:''},
        {id:2,title:'注册',num:''},
        {id:3,title:'注册',num:''},
        {id:4,title:'注册',num:''},
        {id:5,title:'注册',num:''},
        {id:6,title:'注册',num:''},
        {id:7,title:'注册',num:''},
        {id:8,title:'注册',num:''},
        {id:9,title:'注册',num:''}
      ],
      array1:[
        {id:1,title:'NgngLuong',num:''},
        {id:2,title:'NgngLuong',num:''},
        {id:3,title:'NgngLuong',num:''},
        {id:4,title:'NgngLuong',num:''},
        {id:5,title:'NgngLuong',num:''}
      ],
      merchantData: {},
      auditSituationData: {},
      historicalLoanData: {},
      consumptionSituationData: {},
      todayFive: [
        {id:1,title:'NgngLuong',num:''},
        {id:2,title:'NgngLuong',num:''},
        {id:3,title:'NgngLuong',num:''},
        {id:4,title:'NgngLuong',num:''},
        {id:5,title:'NgngLuong',num:''}
      ],
      sevenFive: [
        {id:1,title:'NgngLuong',num:''},
        {id:2,title:'NgngLuong',num:''},
        {id:3,title:'NgngLuong',num:''},
        {id:4,title:'NgngLuong',num:''},
        {id:5,title:'NgngLuong',num:''}
      ],
      date: ''
    }
  },
  computed: {
  },
  methods: {
    getMerchantData(){// 商户情况
      this.$axios.post(this.$action.workbench_partner, '').then(res => {
        if (res.code == 200) {
          this.merchantData = res.data;
        }
      })
    },
    getTodayData(){// 今日数据
      this.$axios.post(this.$action.workbench_today, '').then(res => {
        if (res.code == 200) {
          this.todayData = [
            { id:1,title:'adminHome.todyRegisterNum',num:res.data.registerCount },
            { id:2,title:'adminHome.no17',num:res.data.applyCount },
            { id:3,title:'adminHome.no49',num:res.data.repetitiveLoanOrderCount },
            { id:4,title:'adminHome.no50',num:res.data.loanCount },
            { id:5,title:'adminHome.no51',num:res.data.loanRepetitiveCount },
            { id:6,title:'adminHome.no52',num:res.data.expireOrderCount },
            { id:7,title:'adminHome.no53',num:res.data.normalRepaymentCount },
            { id:8,title:'adminHome.no54',num:res.data.urgeOrderCount },
            { id:9,title:'adminHome.no55',num:res.data.overdueRepaymentCount },
          ]
        }
      })
    },
    getAuditSituationData(){// 今日审核概况
      this.$axios.post(this.$action.workbench_today_audit, '').then(res => {
        if (res.code == 200) {
          this.auditSituationData = res.data;
        }
      })
    },
    getDailyData(){// 上周每日数据
      this.$axios.post(this.$action.workbench_average, '').then(res => {
        if (res.code == 200) {
          this.dailyData = [
            { id:1,title:'adminHome.no56',num:res.data.registerCount },
            { id:2,title:'adminHome.no57',num:res.data.applyCount },
            { id:3,title:'adminHome.no58',num:res.data.repetitiveLoanOrderCount },
            { id:4,title:'adminHome.no59',num:res.data.loanCount },
            { id:5,title:'adminHome.no60',num:res.data.loanRepetitiveCount },
            { id:6,title:'adminHome.no61',num:res.data.expireOrderCount },
            { id:7,title:'adminHome.no62',num:res.data.normalRepaymentCount },
            { id:8,title:'adminHome.no63',num:res.data.urgeOrderCount },
            { id:9,title:'adminHome.no64',num:res.data.overdueRepaymentCount },
          ]
        }
      })
    },
    getHistoricalLoanData(){// 历史放款情况
      this.$axios.post(this.$action.workbench_historical, '').then(res => {
        if (res.code == 200) {
          this.historicalLoanData = res.data;
        }
      })
    },
    getConsumptionSituationData(){// 消费情况
      this.$axios.post(this.$action.workbench_consumption, '').then(res => {
        if (res.code == 200) {
          this.consumptionSituationData = res.data;
        }
      })
    },
    getTodayFiveData(){// 今日前五
      this.$axios.post(this.$action.workbench_today_five, '').then(res => {
        if (res.code == 200) {
          this.todayFive = res.data;
        }
      })
    },
    getSevenFiveData(){// 7日前五
      this.$axios.post(this.$action.workbench_seven_five, '').then(res => {
        if (res.code == 200) {
          this.sevenFive = res.data;
        }
      })
    },
    refresh(){
      this.getMerchantData()
      this.getTodayData()
      this.getAuditSituationData()
      this.getDailyData()
      this.getHistoricalLoanData()
      this.getConsumptionSituationData()
      this.getTodayFiveData()
      this.getSevenFiveData()
      var date=new Date();
      var year=date.getFullYear();
      var month=date.getMonth();
      var day=date.getDate();
      var hour=date.getHours();
      var minute=date.getMinutes();
      var second=date.getSeconds();
      if (hour<10) {
        hour='0'+hour;
      }
      if (minute<10) {
        minute='0'+minute;
      }
      if (second<10) {
        second='0'+second;
      }
      var time=year+'/'+month+'/'+day+'/'+hour+':'+minute
      this.date = time
    }
  },
  mounted () {
    this.refresh()
  }
}
</script>
<style scoped lang="scss">
.pos_abs{
  position: absolute;
  right: 30px;
  top: 20px;
}
.shadowbox{
  width: 100%;
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 16px 0px rgba(140,143,163,0.13);
  padding: 22px 0px;
}
.shadowbox1{
  width: 100%;
  // padding: 22px 0px;
}
.shadowType1{
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 16px 0px rgba(140,143,163,0.13);
}
.total{
  display: flex;
  flex-wrap: wrap;
}
.embellish{
  display: inline-block;
  width:3px;
  height:18px;
  background:rgba(84,131,249,1);
  border-radius:2px;
}
.w310{
  width: 310px;
  height: 114px;
  padding: 30px 0 0 100px;
}
.bg1{
  // background-color: blueviolet;
  background-image: url('../../../assets/img/11.png');
}
.bg2{
  // background-color: rgb(86, 96, 243);
  background-image: url('../../../assets/img/22.png');
}
.bg3{
  // background-color: rgb(120, 240, 126);
  background-image: url('../../../assets/img/33.png');
}
.one-detail,.one-ul{
  width: 100%;
}
.w25_{
  width: 25%;
}
.miniimg{
  width: 54px;
  height: 54px;
  // background-color: cyan;
}
.img1{
  background-image: url('../../../assets/img/01.png');
}
.img2{
background-image: url('../../../assets/img/02.png');
}
.img3{
background-image: url('../../../assets/img/03.png');
}
.img4{
background-image: url('../../../assets/img/04.png');
}
.two{
  width: 500px;
  padding-bottom: 6px;
}
.h70{
  height: 70px;
  border-bottom: 1px solid rgba(241,241,241,1);
}
.circle{
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.circle_1{
  background-color: #F5BE43;
}
.circle_2{
  background-color: #5377E0;
}
.circle_3{
  background-color: #6BE0A9;
}
.circle_4{
  background-color: #EC5B55;
}
.w30_{
  width: 30%;
}
.dashTable{
  width: 100%;
  th{
    height: 60px;
    padding: 0;
    text-align: center;
    line-height: 60px;
    font-weight:400;
    color: #26282C;
  }
  td{
    text-align: center;
    color: #26282C;
  }
  td:last-child{
    color: #5483F9;
  }
}
.index::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: skewX(-45deg);
}
.index {
    width: 100px;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
}
@mixin background($url) {
  background-image: url($url);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
}
@mixin flex-cen{
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1367px){

    .total-li{
      width: calc(100% / 5);
      border-right: 1px dashed #EBEBEB;
      &:last-child{
        border: none;
      }
      &:nth-child(5){
        border: none;
      }
    }
    .one{
      width: 100%;
      padding: 24px;
      margin-bottom: 20px;
    }
    .mb_30{
      margin-bottom: 30px;
    }
}
@media screen and (min-width: 1367px){

    .total-li{
      width: calc(100% / 9);
      border-right: 1px dashed #EBEBEB;
      &:last-child{
        border: none;
      }
    }
    .one{
      width: 1045px;
      padding: 24px;
    }
    
    .mt_30{
      margin-top: 30px;
    }
}

.cl_262{color: #26282C}
.cl_999{color: #999999}
.cl_365{color: #365DDD}
.cl_fff{color: #ffffff}

</style>
